<template>
	<div class="app">
		<!-- 插槽 -->
		<nav-bar>
			<input type="text" />
		</nav-bar>

		<!-- 默认插槽 -->
		<nav-bar></nav-bar>

		<!-- 具名插槽 -->
		<nav-bar>
			<template v-slot:left>
				<button>{{ leftText }}</button>
			</template>
			<template v-slot:content>
				<input type="text" />
			</template>
			<template #right>
				<a href="#">登录</a>
			</template>
		</nav-bar>

		<nav-bar>
			<template v-slot:[position]>
				<a href="#">注册/登录</a>
			</template>
		</nav-bar>
		<button @click="position = 'left'">左边</button>
		<button @click="position = 'content'">中间</button>
		<button @click="position = 'right'">右边</button>
	</div>
</template>

<script>
import NavBar from './components/NavBar.vue'
export default {
	data() {
		return {
			position: 'content',
			leftText: '返回11',
		}
	},
	components: {
		NavBar,
	},
}
</script>

<style scoped></style>
